<template>
	<view>
		<block v-if="loading">
			<view  class="skeleton"  :class="{ animate: animate }">
			<view class="flex align-center flex-column mt-5 mb-3">
				<view class="skeleton-title md" style="width: 30%;"></view>
				<view class="skeleton-title" style="width: 20%;"></view>
			</view>
				<view class="flex mt-2" v-for="(item,index) in 5">
					<view class="skeleton-title" style="width: 20%;"></view>
					<view class="skeleton-title ml-1" style="width: 30%;" :style="style(index)"></view>
				</view>
			</view>
		</block>
		<block v-else>
			<view >
				<slot></slot>
			</view>
			</block>
	</view>
</template>
<script>
export default {
	props: {
		loading: {
			type: Boolean,
			default: true
		},
		animate: {
			type: Boolean,
			default: true
		},
	},
	computed:{
		style(index){
			return function(index){
				console.log(index);
				if(index==0||index==1) return 'width:10%';
				if(index==4) return 'width:60%';
			}
		}
	},
	data() {
		return {};
	},
};
</script>

<style scoped lang="less">
.skeleton {
	--bg-color: #f2f3f5;
	--row-height: 15px;
	--row-margin-top: 12px;
	--title-border-radius: 2px;
	--text-height: 10px;
	padding: 20rpx 40rpx;
	margin-top: var(--status-bar-height);
}
.skeleton-title {
	background-color: var(--bg-color);
	height: var(--row-height);
	border-radius: var(--title-border-radius);
	margin-bottom: var(--row-margin-top);
}
.md {
	height: 50rpx;
}
.skeleton.animate {
	animation: skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes skeleton-blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}


</style>
